<template>
  <div class="content-item-box">
    <div class="statistics-num">
      <Echart id="proportion" style="width: 50%" :options="options"
              @click.native="getTableData();isVisible = true"></Echart>
      <div class="t-status">
        <div class="status">
          <div class="status-num">
            <!--            <p style="color: #00f6e4">{{ yixun }}</p>-->
            <dv-digital-flop :config="config" class="p" style="color: #00f6e4" />
            <div class="p1">已巡察</div>
          </div>
        </div>
        <div class="status">
          <div class="status-num">
            <!--            <p style="color: #fff43f">{{ zhengxun }}</p>-->
            <dv-digital-flop :config="config1" class="p" style="color: #fff43f" />
            <div class="p1">正在巡察</div>
          </div>
        </div>
        <div class="status">
          <div class="status-num">
            <!--            <p style="color: #ff4e4e">{{ weixun }}</p>-->
            <dv-digital-flop :config="config2" class="p" />
            <div class="p1">未巡察</div>
          </div>
        </div>

      </div>

    </div>
    <div class="waterpolo" v-if="waterpoloList.length > 0">
      <div
        class="waterpolo-item"
        v-for="(item, i) in waterpoloList" @click="openDialog(item)">
        <div style="width: 100%;height: calc(100%)"
             :id="'waterpolo' + i"
             :ref="'waterpolo' + i"></div>
        <p>
          {{ getDict(dict.mk, item.name) }}
        </p>
      </div>
    </div>
    <el-dialog :visible.sync="isVisible" :modal="false" custom-class="dialog">
      <div slot="title" style="display: flex;align-items: center;font-size: 20px;font-weight: 600">
        <img class="cursor" src="~@/assets/img/cursor.png">
        {{getDict(dict.mk, currentItem.name)}}
      </div>
      <div class="search">
        <el-select v-model="xcStatus" placeholder="请选择巡察状态" style="margin-right: 6px">
          <el-option
            v-for="item in dict.xcdxzt"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" style="background: #1f89cc" @click="onSearch">搜索</el-button>
        <el-button type="primary" style="background:transparent;" @click="reset">重置</el-button>
      </div>

      <el-table :data="tableData" style="height: 300px">
        <el-table-column
          type="index"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column property="xcdxName" label="被巡察单位名称" width="200"></el-table-column>
        <el-table-column property="address" label="性质">
          <template slot-scope="scope">
            {{ getDict(dict.mk, currentItem.name) }}
          </template>
        </el-table-column>
        <el-table-column property="address" label="巡察状态">
          <template slot-scope="scope">
            {{ getDict(dict.xcdxzt, scope.row.state) }}
          </template>
        </el-table-column>
        <el-table-column property="termAndRound" label="巡察任务信息"></el-table-column>
        <el-table-column property="teamName" label="巡察组"></el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>
<script>
import { getHomeTermTargetList, homeList } from '@/api';
import * as echarts from 'echarts';

export default {
  name: 'LeftTop1',
  dicts: ['mk', 'xcdxzt'],
  data() {
    return {
      xcStatus: '',
      options: [],
      isVisible: false,
      yixun: 0,
      zhengxun: 0,
      weixun: 0,
      waterpoloList: [],
      notalentStatistics: false,
      nodataStatistics: false,
      config: {
        number: [0],
        content: '{nt}',
        style: {
          fontSize: 36,
        },
      },
      config1: {
        number: [0],
        content: '{nt}',
        style: {
          fontSize: 36,
          fill: '#fff43f',
        },
      },
      config2: {
        number: [0],
        content: '{nt}',
        style: {
          fontSize: 36,
          fill: '#ff4e4e',
        },
      },
      tableData: [],
      currentItem: {},
    };
  },
  props: ['termId'],
  watch: {
    termId: function(newVal, oldVal) {
      this.initData();
    },
  },
  async created() {
    this.initData();
  },
  methods: {
    reset(){
      this.xcStatus='';
      this.getTableData()
    },
    onSearch() {
      this.getTableData(this.xcStatus);
    },
    openDialog(i) {
      this.currentItem = i;
      this.getTableData(i.name);
      this.isVisible = true;
    },
    async getTableData() {
      const params = {
        'Q_F_XCJ_ID_S_EQ': this.termId,
        'Q_F_STATE_S_EQ': this.xcStatus,
        'Q_F_PLATE_S_EQ': this.currentItem.name,
      };
      const res = await getHomeTermTargetList(params);
      this.tableData = res.result.data;
    },
    async initData() {
      const res = await homeList(this.termId);
      res.data.state.forEach(element => {
        if (element.name == '0') {
          this.weixun = element.number;
          this.config2 = { ...this.config2, number: [parseInt(element.number)] };
        }
        if (element.name == '1') {
          this.zhengxun = element.number;
          this.config1 = { ...this.config1, number: [parseInt(element.number)] };
        }
        if (element.name == '2') {
          this.yixun = element.number;
          this.config = { ...this.config, number: [parseInt(element.number)] };
        }
      });
      this.waterpoloList = [...res.data.plate];
      this.setProportion(res.data.inspectRate);
      setTimeout(() => {
        for (let index = 0; index < this.waterpoloList.length; index++) {
          this.setWaterpolo(index, this.waterpoloList[index]);
        }
      }, 100);
    },
    setProportion(value) {
      let option = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['40%', '80%'],
            min: 0,
            max: 100,
            radius: '150%',
            splitNumber: 8,
            progress: {
              show: true,
              width: 10,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(0,252,255,0.35)',
                  },
                  {
                    offset: 1,
                    color: '#09f3c3',
                  },
                ]),
              },
            },
            pointer: { show: false },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: 'rgb(255, 244, 63)',
                width: 2,
              },
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 24,
              color: '#fff000',
              offsetCenter: [0, '-20%'],
              fontWeight: 'bold',
              formatter: function(value) {
                return value + '{a|%}' + '\n' + '{a|巡察覆盖率}';
              },
              rich: {
                a: {
                  color: '#fff',
                  fontSize: 16,
                  fontWeight: 600,
                  lineHeight: 16,
                },
              },
            },
            data: [{
              value: parseInt(value),
              name: '',
            }],
          },
        ],
      };
      this.options = option;
    },
    setWaterpolo(index, data) {

      var myChart = this.$echarts.init(document.getElementById('waterpolo' + index));

      // let title = getName(data.name, this.dict.mk, 'value', 'name');
      let title = this.getDict(this.dict.mk, data.name);
      let list = data.list;
      let vate = parseInt(data.vate) / 100;
      var option = {
        title: [
          {
            show: false,
            text: title,
          },
        ],
        tooltip: {
          show: true,
          padding: 16,
          border: 0,
          boxShadow: ' 0 0 10px rgb(0,153,184) inset,0 0 30px rgb(0,153,184)',
          backgroundColor: ' rgba(1,17,45,0.85)',
          borderRadius: 4,
          trigger: 'item',
          formatter: function(params) {
            var result = '<div>';
            result += '<span style=\'width:60px;display:inline-block; color:#fff;font-size: 14px;margin-right:20px\'>' + list[0].name + ':</span>' + '<span style=\'font-size: 24px;display:inline-block;color: #fff000;\'>' + list[0].number + '</span>' + '<span style="font-size: 14px;display:inline-block; color:#fff;">个</span>' + '<br />';
            result += '<span style=\'width:60px;display:inline-block; color:#fff;font-size: 14px;margin-right:20px\'>' + list[1].name + ':</span>' + '<span style=\'font-size: 24px;display:inline-block;color: #fff000;\'>' + list[1].number + '</span>' + '<span style="font-size: 14px;display:inline-block; color:#fff;">个</span>' + '<br />';
            result += '</div>';
            return result;
          },
        },
        series: [
          {
            type: 'liquidFill',
            radius: '65%',
            center: ['50%', '40%'],
            // 图形样式
            itemStyle: {
              shadowBlur: 5, // 波浪的阴影范围 设置为0不会出现底色为灰色的情况
            },
            color: [{
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 1,
                color: ['#09fec7'], // 0% 处的颜色
              }, {
                offset: 0,
                color: ['#0d8da4'], // 100% 处的颜色
              }],
              global: false, // 缺省为 false
            }],
            data: [vate, vate - 0.1], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: 'RGBA(255,255,255, 0.1)',
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: '#36383f',
                },
              },
            },
            outline: {
              // show: false
              borderDistance: 4,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#2784e2',
              },
            },
          },
        ],
      };
      if (index % 2 !== 0) {
        option.series[0].color = [{
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [{
            offset: 1,
            color: ['#861efc'], // 0% 处的颜色
          }, {
            offset: 0,
            color: ['#5d32ff'], // 100% 处的颜色
          }],
          global: false, // 缺省为 false
        }];
      }
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.content-item-box {
  width: 100%;
}

.search {
  margin-bottom: 8px;
  text-align: right;
}

.tip-box {
  background: #0a32af;
  width: 121px;
  height: 72px;
  background-color: #01112d;
  border-radius: 4px;
  border: solid 1px #0d48a9;
  opacity: 0.85;
}

.statistics-num {
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: space-between;

  .t-status {
    width: 415px;
    background-image: url("~@/assets/img/fugaibg.png");
    height: 95px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .proportion {
    width: 24%;
    height: 82px;
    cursor: pointer;
  }

  .status {
    width: 33%;
    cursor: pointer;

    .status-num {
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      .p {
        font-weight: 700;
        font-family: YouSheBiaoTiHei;
        font-size: 36px;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #00f6e4;
        line-height: 36px;
        height: 36px;
      }

      > p {
        font-weight: 700;
        font-family: YouSheBiaoTiHei;
        font-size: 36px;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #00f6e4;
        line-height: 36px;
      }

      .p1 {
        text-align: center;
        font-weight: 600;
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #ffffff;
      }

      p + p {
        text-align: center;
        font-weight: 600;
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #ffffff;
      }
    }
  }
}

.waterpolo {
  width: 100%;
  height: calc(100%);
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;

  .waterpolo-item {
    width: 25%;
    height: 150px;
    cursor: pointer;
    position: relative;

    p {
      position: absolute;
      left: 0;
      bottom: 0;
      text-align: center;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 18px;
      color: #fff;
      font-weight: bold;
      margin: 0;
      padding: 0;
      line-height: 38px;
    }
  }
}
</style>
